<template>

	<fui-row class="selected">
		<fui-col :span="6">
			<fui-button color="#0052D9" type="link" @click="onSelectAll">
				全选
			</fui-button>
		</fui-col>
		<fui-col :span="16" class="el">
			<text>已选:</text>
			<view class="val">
				<template v-for="(item,index) in value">
					<text v-if="item.num">{{item.num}}{{item.text}}</text>
				</template>

			</view>
		</fui-col>
		<fui-col :span="2">
			<!-- chevron-down -->
			<fui-icon name="turningup" color="#a3a3a3" size="32" @click="onExpand"></fui-icon>
		</fui-col>

	</fui-row>
	<!-- 	<custom-select-page-selected-multiple-popup-data :visible="visible" @close="close">
	</custom-select-page-selected-multiple-popup-data> -->






</template>

<script>
	import {
		useDeptStore
	} from '../../../store/modules/dept'
	import {
		mapState,
		mapActions,
		mapGetters
	} from 'pinia'
	export default {
		props: {
			value: {
				type: Object,
				default: () => {}
			}
		},
		data() {
			return {
				visible: false
			}
		},
		computed: {},
		emits: ['selectAll', 'close', 'expand'],
		methods: {

			onSelectAll() {
				this.$emit('selectAll')
			},

			onExpand() {
				// console.log('onExpand');
				this.$emit('expand')
				// this.visible = true
			},
			close() {
				this.visible = false
				this.$emit('close')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.selected {
		display: flex;
		align-items: center;
		// padding: 16rpx 32rpx;

		.el {
			position: relative;
			padding-left: 32rpx !important;
			display: flex;
			align-items: center;

			&::after {
				content: "";
				position: absolute;
				left: 0;
				top: 0;
				width: 2rpx;
				height: 100%;
				background: #e7e7e7;
			}

			.val {
				margin-left: 16rpx;
			}
		}
	}
</style>